<template>
  <div clas="enjoy">
    <van-tabs v-model="activeName" sticky swipeable @scroll="tabsScroll" @change="tabChange">
      <van-tab :title="v.title" :name="v.name" v-for="(v,k) in tabs" :key="k" ></van-tab>
        <Enjoyitems :id="id"/>
    </van-tabs>
  </div>
</template>

<script>
   import { Tab,Tabs } from 'vant'
   import Enjoyitems from '@/components/enjoy/Enjoyitems'
    export default {
        name: "Enjoylist",
        data() {
            return {
              activeName:0,
              tabs:[
                  {name:0,title:'风景如画',to:{name:'enjoyitems',query:{id:1}}},
                  {name:1,title:'美女如云',to:{name:'enjoyitems',query:{id:2}}},
                  {name:2,title:'宠物交流',to:{name:'enjoyitems',query:{id:3}}},
                  {name:3,title:'技术交流',to:{name:'enjoyitems',query:{id:4}}},
                  {name:4,title:'名车鉴赏',to:{name:'enjoyitems',query:{id:5}}}
              ],
              id:2
            }
        },
        components:{
          [Tab.name]:Tab,
          [Tabs.name]:Tabs,
          Enjoyitems
        },
        methods:{
            //当滑动的时候才会触发，首次加载也会触发
            tabsScroll(value) {
            },
            tabChange(value) {
                this.id = value
            }
        }
    }
</script>

<style scoped>

</style>
